<template>
	<view>
		<!-- 明细 -->
		<view class="mingbox">
			<view class="gechang" @click="getchange()">
				<view class="uni-input">
					<span style="margin-right: 10px;">{{shop_name||'全部'}}</span>
					<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
				</view>
        <!-- 选择餐厅 -->
        <u-select v-model="showRestaurantClassificationModal" mode="single-column" :list="array"
                  value-name="store_shop_id" label-name="shop_name" @confirm="bindPickerChange"></u-select>
			</view>
			<!-- <view class="gechang">
				 <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
			  </view> -->


			<view class="marg">收入￥{{page_amount}}/￥{{amounts}} 补贴金额 ¥{{zhuan_money_all}}</view>
		</view>
		<!-- 账单 -->
		<view>
			<view class="xiang_box" v-for="(i,n) in Datalist" :key="n">
				<view  class="flex" style="justify-content: space-between;">
					<view class="flex">
						<image  class="toimg" v-if="i.avatar" :src="i.avatar" mode=""></image>
						<view class="toimg" v-else></view>
						<view style="color: #222222;">{{i.nickname }}</view>
					</view>
					<view>+{{i.amount}}</view>
				</view>
				<view class="xiang_cont">
				<view class="mr5">{{i.createtime_text }}</view>
				<view class="flex mr5 bottom-price" >
					<view>现金收入：{{i.cash_money}}</view>
					<view class="jianju">代金券:{{i.daijin_money}}</view>
					<view class="jianju">米包:{{i.hongbao_money}}</view>
				
				</view>
				<view class="flex mr5 bottom-price" >
					<view class="">补贴金额:{{i.zhuan_money}}</view>
				</view>
				</view>
			</view>
      <!-- 更多 -->
      <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#d4d4d4" />
		</view>
	</view>
</template>
<script>
// import {orderslist,storeLists} from '@/api/merchat.js'
	export default {
		data() {
			return {
				page:1,
				zhuan_money_all:"",
        shop_name:"",
        store_shop_id:0,
				lastPage:0,
				Datalist:[],
				statusText:"",
				array:[],
				index:0,
				page_amount:"",
				amounts:"",
        isEmpty: true,
        loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
        showRestaurantClassificationModal:false
			};
		},
		onLoad() {
      this.getData();
      this.orderslist()
		},
		onReachBottom:function(){
				this.page++
				if(this.page>this.lastPage){
					return
				}
        this.orderslist()
		},
		methods:{
      getchange(){
        this.showRestaurantClassificationModal = true;
      },
      // 选择餐厅
      bindPickerChange(e) {
        this.store_shop_id = e[0].value;
        this.shop_name = e[0].label;
		this.Datalist=[]
		this.page=1
        this.orderslist()
      },
			getData(){
        this.$http_business('order.storeList',{
          token:uni.getStorageSync('token'),
          page:1
        }).then(res => {
          console.log(res)
          if (res.code === 1) {
            this.array= res.data;
            console.log("====this.array",this.array)
            this.page=1;
          }
        });
			},
      orderslist(){
        this.$http_business('order.storeOrderList',{
          token:uni.getStorageSync('token'),
          page:this.page,
          store_shop_id:this.store_shop_id
        }).then(res => {
          console.log(res)
          if (res.code === 1) {
            console.log(res)
			this.zhuan_money_all=res.data.zhuan_money_all
            this.amounts = res.data.amount
            this.page_amount= res.data.page_amount
            this.lastPage = res.data.last_page
            this.statusText = res.data.last_page==this.page?"暂无更多数据":"上拉加载"
            this.Datalist =[...this.Datalist,...res.data.data]
            this.isEmpty = !this.Datalist;
            this.loadStatus = this.page < res.data.last_page ? 'loadmore' : 'nomore';
          }
        });
      }
		}
	}

</script>

<style lang="scss" scoped>

	.gechang{
		display: flex;
	}
	.mingbox{
		padding: 30rpx;
	}
	.marg{
		margin: 16rpx 0;
	}
	.xiang_box{
		width: 100%;
		// height: 196rpx;
		background: #FFFFFF;
		box-shadow: 52px 1px 0px 0px #EEEEEE;
		padding: 30rpx;
		border-bottom: 1px solid rgba(0,0,0,.05);
			.toimg{
				width: 44rpx;
				height: 44rpx;
				border-radius: 10rpx;
				background-color: red;
				margin-right: 20rpx;
			}
	}
	.flex{
		display: flex;
	}
	.xiang_cont{
		margin: 0 0 0 0px;
    color: #999999;
		font-size: 13px;
	}
	.mr5{
		margin-top: 5px;
	}
    .jianju{
        margin-left: 20rpx;
    }
    .bottom-price{
     font-size: 26rpx;
	 flex-wrap: wrap;
	 text-align: left;
	 justify-content: flex-start;
	 // flex-flow: ;
    }
</style>
